<template>
  <van-cell-group class="items card-group-box">
    <van-cell>
      <div slot="title">
        <van-checkbox
          v-model="items.checked"
          @click="onShopChecked"
          ref="checkboxes"
        >{{items.shop_name}}</van-checkbox>
      </div>
      <div slot="right-icon" v-if="couponList.length > 0">
        <span class="shop-title-rigth e-handle" @click="showPopupCoupon = true">领券</span>
      </div>
    </van-cell>
    <van-cell class="goods-item" v-for="(item,index) in items.goods_list" :key="index">
      <div class="info">
        <van-checkbox v-model="item.checked" :disabled="item.disabled" @change="onGoodsChecked"/>
        <GoodsCard
          class="goods-card"
          :id="item.goods_id"
          :desc="item.sku_name"
          :thumb="item.picture_info | BASESRC"
        >
          <div slot="title" class="info-head">
            <router-link tag="div" class="name" :to="'/goods/detail/'+item.goods_id">
              <van-tag
                type="danger"
                class="tag"
                v-if="showTag(item.promotion_type)"
              >{{tagName(item.promotion_type)}}</van-tag>
              {{item.goods_name}}
            </router-link>
            <div class="price">{{item.price | yuan}}</div>
          </div>
          <div slot="bottom" class="info-foot">
            <van-stepper
              v-model="item.num"
              integer
              async-change
              @change="onNumChange(item,index)"
              @overlimit="onStepperLimit"
              :max="item.max_buy === 0 ? item.stock : item.stock > item.max_buy ? item.max_buy : item.stock"
            />
            <div class="del e-handle" @click="onRemove(item.cart_id)">
              <van-icon name="delete"/>
            </div>
          </div>
        </GoodsCard>
      </div>
    </van-cell>
    <CellFullCut v-if="items.mansong_info.rule_id" :items="items.mansong_info"/>
    <PopupCoupon
      v-model="showPopupCoupon"
      :items="couponList"
      :title="items.shop_name"
      :get-type="4"
    />
  </van-cell-group>
</template>

<script>
import { Stepper } from "vant";
import GoodsCard from "@/components/GoodsCard";
import PopupCoupon from "@/components/PopupCoupon";
import CellFullCut from "@/components/CellFullCut";
import { GET_SHOPCOUPONLIST } from "@/api/coupon";
import { REMOVE_CARTGOODS, EDIT_CARTNUM } from "@/api/mall";
export default {
  data() {
    return {
      showPopupCoupon: false,
      couponList: []
    };
  },
  filters: {
    toNumber(value) {
      return parseFloat(value);
    }
  },
  props: {
    items: Object,
    loadData: Function
  },
  mounted() {
    if (this.$store.state.config.addons.coupontype) {
      const $this = this;
      const items = $this.items;
      let goods_id_array = [];
      $this.popupCouponTitle = items.shop_name;
      items.goods_list.forEach(({ goods_id }) => {
        goods_id_array.push(goods_id);
      });
      GET_SHOPCOUPONLIST({
        goods_id_array
      }).then(({ data }) => {
        $this.couponList = data;
      });
    }
  },
  methods: {
    onShopChecked() {
      const items = this.items;
      items.goods_list.forEach(item => {
        item.checked = item.disabled ? false : !items.checked;
      });
    },
    onGoodsChecked() {
      const items = this.items;
      const checkItems = items.goods_list.filter(item => {
        return item.checked == true;
      }).length;
      const InitialItems = items.goods_list.filter(item => {
        return !item.disabled;
      }).length;
      items.checked = checkItems == InitialItems;
    },
    onNumChange({ num, max_buy, stock, cart_id }, index) {
      if (num <= 0) {
        return;
      }
      if (this.async) {
        return;
      }
      const maxCount =
        max_buy === 0 ? stock : stock > max_buy ? max_buy : stock;
      const count = num > maxCount ? maxCount : num;
      this.async = true;
      EDIT_CARTNUM({
        num: count,
        cartid: cart_id
      }).then(() => {
        this.loadData(index);
        this.async = false;
      });
    },
    onRemove(cart_id) {
      const $this = this;
      $this.$Dialog
        .confirm({
          message: "确定删除该商品？"
        })
        .then(() => {
          REMOVE_CARTGOODS(cart_id).then(({ message }) => {
            $this.$Toast.success(message);
            setTimeout(() => {
              $this.loadData();
            }, 100);
          });
        });
    },
    onStepperLimit(type, num) {
      if (type === "plus") {
        this.$Toast("已超出最大购买数！");
      } else {
        this.$Toast("至少选择一件！");
      }
    },
    tagName(e) {
      let text = "";
      switch (e) {
        case 1:
          text = "秒杀";
          break;
        case 2:
          text = "团购";
          break;
        case 3:
          text = "预售";
          break;
        case 4:
          text = "砍价";
          break;
        case 5:
          text = "限时折扣";
          break;
      }
      return text;
    },
    showTag(e) {
      return parseInt(e) ? true : false;
    }
  },
  components: {
    GoodsCard,
    PopupCoupon,
    CellFullCut,
    [Stepper.name]: Stepper
  }
};
</script>
<style scoped>
.items {
  background: #fff;
}

.goods-item .info {
  display: flex;
}

.goods-item .info >>> .van-checkbox {
  display: flex;
  align-items: center;
  margin-right: 6px;
}

.shop-title-rigth {
  padding: 4px;
  color: #ff454e;
}

.goods-item .info .goods-card {
  flex: 1;
  margin-top: 0;
}

.discount-cell {
  padding: 6px 15px;
}

.discount-list .item {
  display: flex;
  font-size: 12px;
  color: #909399;
  align-items: center;
  line-height: 18px;
  margin: 4px 0;
}

.discount-list .item span {
  padding-left: 6px;
}

.info-head {
  width: 100%;
  display: flex;
}

.info-head .name {
  max-height: 40px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 40px;
  line-height: 20px;
  flex: 1;
  position: relative;
}

.info-head .price {
  color: #ff454e;
  font-weight: bold;
  line-height: 1.2;
  padding-left: 4px;
}

.info-foot {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.info-foot .del {
  display: flex;
  padding: 7px;
  font-size: 16px;
}
.tag {
  margin-right: 4px;
}
</style>

